<template>
	<view>
		<view class="g-str-intercept">
			{{strAbb}}
      <!-- <text v-if="showTag" class="str-tag" inverted  :text="tagText" @click.stop="onSwitchClick">{{tagText}}</text> -->
		</view>
	</view>
</template>

<script>
	/**
	 * @description 字符串截取收起和展开小组件
	 * @property targetTag {Object} 默认值{showAll:"收起",showAbb:"展开"} 
	 * @property len {Number} 字符截取的长度
	 * @property defaultStr {String}  原始内容
	 * @event {Function()} string-abb-change 切换按钮上报 value  true or false
	 * @example   <add-member :show="show" type="update" :memberNo="memberNo" @close="close" @success="" @fail="" ></add-member>
	 */
	export default {
		name:"gStrIntercept",
		data() {
			return {
				isAbb:true
			};
		},
		props:{
			defaultStr:{
				type:[String,Number],
				default:""
			},
			len:{
				type:Number,
				default:10
			},
			targetTag:{
				type:Object,
				default:function(){
					return {
						showAll:"收起",
						showAbb:"展开"
					}
				}
			}
		},
		computed:{
			showTag:function(){
				if(this.defaultStr && this.defaultStr.length > this.len){
					return true
				}else{
					return false
				}
			},
			strAbb:function(){
				let str = ""+this.defaultStr
				let len = this.len
				let val = ''
				if(str){
					if(str.length > len){
						val = str.slice(0,len) + '...'
					}else{
						val = str
					}
				}
				return this.isAbb ? val : str
			},
			tagText:function(){
				if(this.isAbb){
					return this.targetTag.showAbb
				}else{
					return this.targetTag.showAll
				}
			}
		},
		methods:{
			onSwitchClick(){
				this.isAbb = !this.isAbb
				console.log("onSwitchClick",this.isAbb)
				this.$emit("string-abb-change",this.isAbb)
			}
		}
	}
</script>

<style lang="scss" scoped>
.g-str-intercept{
	// display: flex;
	// flex-direction: row;
	// justify-content: left;
	align-items: center;
  text-align: center;
	.str-tag{
		cursor:pointer;
		font-size: $retail-font-size-xs;
		border: 1px solid $retail-color-dark;
		color:$uni-text-color-grey;
		white-space:nowrap;
		padding:4rpx 6rpx;
		border-radius: 2rpx;
	}
}
</style>
